<template>
  <div>
    <a-card class="h-full" :body-style="{ width: '100%', overflow: 'auto', display: 'flex', 'flex-direction': 'column', height: '100%' }">
      <BaseTitle title="当日门诊数据" class="!mb-0">
        <a-pagination v-model:current="currentPage" size="small" :total="filterList.length" :page-size="8">
          <template #itemRender="{ type }">
            <span v-if="type === 'prev'"> </span>
            <span v-else-if="type === 'next'"> </span>
            <div v-else class="page-block"></div>
          </template>
        </a-pagination>
      </BaseTitle>
      <div class="flex items-center flex-1 flex-wrap content-start">
        <template v-if="pageList.length > 0">
          <div
            v-for="item in pageList"
            :key="item.key"
            class="bg-secondary rounded-md p-4 w-[23%] flex items-center mx-[1%] mt-2 h-16 2xl:h-28 overflow-hidden"
          >
            <div class="ml-3">
              <span class="text-[12px] 2xl:text-[16px]">{{ item.title }}</span>
              <div class="text-[18px] mt-1 font-semibold 2xl:text-[30px]">
                {{ countList[item.key] || 0 }} <span class="font-normal text-[14px]">{{ item.unit }}</span>
              </div>
            </div>
          </div>
        </template>
        <div v-else class="flex-center w-full h-full">
          <a-empty description="暂无数据" />
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'

const props = defineProps({
  configCodes: {
    type: Array,
    default: () => []
  }
})
const countList = ref({})
const currentPage = ref(1)

const dataList = ref([
  {
    title: '今日挂号',
    biCode: 'Today_Register_Number',
    key: 'jrghrc',
    unit: '位'
  },
  {
    title: '今日手术',
    biCode: 'Today_Surgery_Number',
    key: 'jrssl',
    unit: '台'
  },
  {
    title: '今日营业额',
    biCode: 'Today_Turnover',
    key: 'jryye',
    unit: '元'
  },
  {
    title: '今日个人营业额',
    biCode: 'Today_Personal_Turnover',
    key: 'jrgryye',
    unit: '元'
  },
  {
    title: '今日预约人数',
    biCode: 'Today_Appointment_Number',
    key: 'yyrs',
    unit: '位'
  },
  {
    title: '今日初诊人次',
    biCode: 'Today_Initial_Consultations_Number',
    key: 'czrs',
    unit: '位'
  },
  {
    title: '今日复诊人次',
    biCode: 'Today_Follow-up_Visits',
    key: 'fzrs',
    unit: '位'
  },
  {
    title: '今日复查人次',
    biCode: 'Today_rechecks_Number',
    key: 'fcrs',
    unit: '位'
  },
  {
    title: '今日手术预约人次',
    biCode: 'Today_Surgical_Appointments',
    key: 'ssyy',
    unit: '位'
  },
  {
    title: '今日手术登记人次',
    biCode: 'Today_Surgical_Registrations_Number',
    key: 'ssdj',
    unit: '位'
  },
  {
    title: '今日医疗费用',
    biCode: 'Today_Medical_Expenses',
    key: 'jryye',
    unit: '元'
  },
  {
    title: '今日收费人次',
    biCode: 'Today_Toll_Collection',
    key: 'jrsfrz',
    unit: '位'
  },
  {
    title: '今日手术量',
    biCode: 'Today_Surgical_Volume',
    key: 'jrssl',
    unit: '台'
  }
])
const pageList = computed(() => {
  return filterList.value.slice((currentPage.value - 1) * 8, currentPage.value * 8)
})
const filterList = computed(() => {
  return props.configCodes.map((item) => dataList.value.find((i) => i.biCode === item))
  // return dataList.value.filter((item) => props.configCodes.includes(item.biCode))
})
const getRegisterList = async () => {
  const { code, data, msg } = await post('/statistic/appointment')
  if (code !== 0) return message.error(msg)
  countList.value = { ...countList.value, ...data }
}
const getCount = async () => {
  const { code, data = [], msg } = await post('/statistic/surgeryCount')
  if (code !== 0) return message.error(msg)
  if (data.length === 0) return
  countList.value = { ...countList.value, ...data }
}
onMounted(() => {
  getRegisterList()
  getCount()
})
</script>
<style lang="less" scoped>
:deep(.ant-tabs-nav) {
  &::before {
    border-bottom: none;
  }
}
.card-item {
  width: 23%;
  padding: 8px 16px;
  border-radius: 4px;
}

:deep(.ant-pagination) {
  display: flex;
  .ant-pagination-item {
    display: flex;
    align-items: center;
    justify-content: center;
    &.ant-pagination-item-active {
      border: none;
      .page-block {
        width: 18px;
        background-color: var(--primary-color) !important;
      }
    }
    .page-block {
      width: 10px;
      height: 10px;
      background-color: #b0b0b0 !important;
      border-radius: 5px;
    }
  }
}
</style>
